<template>
	<view>
		<cu-custom bgColor="bg-cyan" isBack>
			<block slot="content">checkbbox多选框</block>
		</cu-custom>
		<view class="smart-padding-wrap">
			<view class="item">
				<checkbox checked="true" />选中
				<checkbox />未选中
			</view>
			<view class="item">
				<checkbox class="checked" color="#F0AD4E" checked="true" />选中
				<checkbox color="#F0AD4E" />未选中
			</view>
			<view class="uni-title uni-common-mt">不同颜色和尺寸的checkbox</view>
			<view>
				<checkbox-group>
					<label>
						<checkbox value="cb" checked="true" color="#FFCC33" style="transform:scale(0.7)" />选中
					</label>
					<label>
						<checkbox value="cb" color="#FFCC33" style="transform:scale(0.7)" />未选中
					</label>
				</checkbox-group>
			</view>
		</view>

		<view class="uni-padding-wrap">
			<view class="uni-title uni-common-mt">
				推荐展示样式
				<text>\n使用 uni-list 布局</text>
			</view>
		</view>
		<view class="uni-list">
			<checkbox-group @change="checkboxChange">
				<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
					<view>
						<checkbox :value="item.value" :checked="item.checked" />
					</view>
					<view>{{item.name}}</view>
				</label>
			</checkbox-group>
		</view>
	</view>
</template>

<script>
</script>

<style>
</style>
